<%@ page language="java" contentType="text/html;charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<%@include file="/WEB-INF/include-head.jsp" %>
<link rel="stylesheet" href="static/ztree/zTreeStyle.css"/>
<script type="text/javascript" src="static/ztree/jquery.ztree.all-3.5.min.js"></script>
<body>
<%@ include file="/WEB-INF/include-nav.jsp" %>
<div class="container-fluid">
    <div class="row">
        <%@ include file="/WEB-INF/include-sidebar.jsp" %>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="glyphicon glyphicon-th-list"></i> 权限菜单列表
                    <div style="float: right; cursor: pointer;" data-toggle="modal" data-target="#myModal">
                        <i class="glyphicon glyphicon-question-sign"></i>
                    </div>
                </div>
                <div class="panel-body">
                    <ul id="treeDemo" class="ztree"></ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="static/js/curl.js"></script>
<script src="static/js/menu.js"></script>
<script>
    var menu = new Menu('treeDemo');
    $(document).ready(function () {
        menu.renderMenu();


    });


    var menuLayerIndex;     //弹窗index
    //新增菜单点击
    $("#treeDemo").on('click', '.menu-btn-add', function () {
        let id = $(this).data('id');    //当前菜单的id，新增menu对象的pid
        let treeNodeId = $(this).parent().attr('id').substr(8);
        let treeNode = menu.treeObj.getNodeByTId(treeNodeId);

        menuLayerIndex = layer.open({
            type: 1,    //！！页面层
            id: "add-modal-layer",
            'content': $('#add-modal-div').html(),
            'btn': [],
            'success': function () {
                $('#add-modal-layer>form').attr('id', 'add-modal-form');
                $('#add-modal-layer>form input[name=pid]').val(treeNode.name);

                //提交
                $('#add-modal-form .btn-success').on('click', function () {
                    let pid = id;
                    let name = $('#add-modal-layer>form input[name=name]').val();
                    let icon = $('#add-modal-layer>form select[name=icon]').val();
                    let url = $('#add-modal-layer>form input[name=url]').val();

                    let data = {
                        pid: pid,
                        name: name,
                        icon: icon,
                        url: url
                    };

                    console.log(data)
                    menu.addMenuNode(data, function () {
                        layer.alert("保存成功！");
                        layer.close(menuLayerIndex);
                        menu.renderMenu();
                    })
                });

                $('#add-modal-form .btn-warning').on('click', function () {
                   $('#add-modal-form').resetForm();
                    $('#add-modal-layer>form input[name=pid]').val(treeNode.name);
                });

                $('#add-modal-form .btn-danger').on('click', function () {
                    layer.close(menuLayerIndex);
                });
            }
        });
    });

    $("#treeDemo").on('click', '.menu-btn-edit', function () {
        //请求数据
        let id = $(this).data('id');
        menu.getMenuNode(id, showEditLayer);

        function showEditLayer(data) {
            menuLayerIndex = layer.open({
                type: 1,    //！！页面层
                id: "edit-modal-layer",
                'content': $('#edit-modal-div').html(),
                'btn': [],
                'success': function () {
                    //回显数据
                    $('#edit-modal-layer>form').attr('id', 'edit-modal-form');
                    $('#edit-modal-layer>form input[name=id]').val(data.id);
                    $('#edit-modal-layer>form input[name=pid]').val(data.pid);
                    $('#edit-modal-layer>form input[name=name]').val(data.name);
                    $('#edit-modal-layer>form select[name=icon]').val(data.icon);
                    $('#edit-modal-layer>form input[name=url]').val(data.url);

                    //提交
                    $('#edit-modal-form .btn-success').on('click', function () {
                        let dataArray = $('#edit-modal-form').serializeArray();
                        console.log(dataArray);
                        let data = {};
                        for (let i = 0; i < dataArray.length; i++) {
                            let item = dataArray[i];
                            data[item.name] = item.value;
                        }
                        menu.updateMenuNode(data, function () {
                            layer.alert("保存成功！");
                            layer.close(menuLayerIndex);
                            menu.renderMenu();
                        });
                    });

                    $('#edit-modal-form .btn-warning').on('click', function () {
                        $('#edit-modal-form').resetForm();
                        $('#edit-modal-layer>form input[name=id]').val(data.id);
                        $('#edit-modal-layer>form input[name=pid]').val(data.pid);
                        $('#edit-modal-layer>form input[name=name]').val(data.name);
                        $('#edit-modal-layer>form select[name=icon]').val(data.icon);
                        $('#edit-modal-layer>form input[name=url]').val(data.url);
                    });

                    $('#edit-modal-form .btn-danger').on('click', function () {
                        layer.close(menuLayerIndex);
                    });
                }
            });
        }
    });


    $("#treeDemo").on('click', '.menu-btn-remove', function () {
        let id = $(this).data('id');
        layer.confirm('确认删除菜单【' + id + '】？', {
            btn: ['确认', '取消'],
            yes: function (index) {
                menu.removeMenuNode(id, function () {
                    layer.alert("删除成功！");
                    menu.renderMenu();
                })
            }
        });
    });



</script>
</body>
<!-- 添加表单 -->
<div class="hidden" id="add-modal-div">
    <form style="padding: 30px">
        <div class="form-group row">
            <label for="add-form-pid">父菜单</label>
            <input type="text" class="form-control" name="pid" id="add-form-pid" readonly>
        </div>
        <div class="form-group row">
            <label for="add-form-name">名称</label>
            <input type="text" class="form-control" name="name" id="add-form-name" required>
        </div>
        <div class="form-group row">
            <label for="add-form-icon">图标</label>
            <select class="form-control glyphicon" name="icon"  id="add-form-icon">
                <option selected disabled>请选择</option>
                <option value="glyphicon glyphicon-user" class="glyphicon">&#57352;  glyphicon glyphicon-user</option>
                <option value="glyphicon glyphicon-th-large" class="glyphicon">&#57360;  glyphicon glyphicon-th-large</option>
                <option value="glyphicon glyphicon-th-list" class="glyphicon">&#57362;  glyphicon glyphicon-th-list</option>
                <option value="glyphicon glyphicon-ok" class="glyphicon">&#57363;  glyphicon glyphicon-ok</option>
                <option value="glyphicon glyphicon-time" class="glyphicon">&#57379;  glyphicon glyphicon-time</option>
                <option value="glyphicon glyphicon-list-alt" class="glyphicon">&#57394;  glyphicon glyphicon-list-alt</option>
                <option value="glyphicon glyphicon-lock" class="glyphicon">&#57395;  glyphicon glyphicon-lock</option>
                <option value="glyphicon glyphicon-list" class="glyphicon">&#57401;  glyphicon glyphicon-list</option>
                <option value="glyphicon glyphicon-tags" class="glyphicon">&#57410;  glyphicon glyphicon-tags</option>
                <option value="glyphicon glyphicon-camera" class="glyphicon">&#57414;  glyphicon glyphicon-camera</option>
                <option value="glyphicon glyphicon-picture" class="glyphicon">&#57440;  glyphicon glyphicon-picture</option>
                <option value="glyphicon glyphicon-check" class="glyphicon">&#57447;  glyphicon glyphicon-check</option>
                <option value="glyphicon glyphicon-random" class="glyphicon">&#57616;  glyphicon glyphicon-random</option>
                <option value="glyphicon glyphicon-comment" class="glyphicon">&#57617;  glyphicon glyphicon-comment</option>
                <option value="glyphicon glyphicon-hdd" class="glyphicon">&#57633;  glyphicon glyphicon-hdd</option>
                <option value="glyphicon glyphicon-dashboard" class="glyphicon">&#57665;  glyphicon glyphicon-dashboard</option>
                <option value="glyphicon glyphicon-equalizer" class="glyphicon">&#57872;  glyphicon glyphicon-equalizer</option>
                <option value="glyphicon glyphicon-king" class="glyphicon">&#57873;  glyphicon glyphicon-king</option>
                <option value="glyphicon glyphicon-cloud" class="glyphicon">&#9729;  glyphicon glyphicon-cloud</option>
                <option value="glyphicon glyphicon-envelope" class="glyphicon">&#9993  glyphicon glyphicon-envelope</option>
                <option value="glyphicon glyphicon-pencil" class="glyphicon">&#9999;  glyphicon glyphicon-pencil</option>
            </select>
        </div>
        <div class="form-group row">
            <label for="add-form-url">链接</label>
            <input type="text" class="form-control" name="url" id="add-form-url" required>
        </div>
        <div class="form-group row">
            <button type="button" class="btn btn-success"><i class="glyphicon glyphicon-ok"></i>提交</button>
            <button type="button" class="btn btn-warning"><i class="glyphicon glyphicon-refresh"></i>重置</button>
            <button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-remove"></i>取消</button>
        </div>
    </form>
</div>

<!-- 更新表单 -->
<div class="hidden" id="edit-modal-div">
    <form style="padding: 30px">
        <div class="form-group row">
            <label for="edit-form-id">id</label>
            <input type="text" class="form-control" name="id" id="edit-form-id" readonly>
        </div>
        <div class="form-group row">
            <label for="edit-form-pid">父菜单</label>
            <input type="text" class="form-control" name="pid" id="edit-form-pid" readonly>
        </div>
        <div class="form-group row">
            <label for="edit-form-name">名称</label>
            <input type="text" class="form-control" name="name" id="edit-form-name" required>
        </div>
        <div class="form-group row">
            <label for="edit-form-icon">图标</label>
            <select class="form-control glyphicon" name="icon"  id="edit-form-icon">
                <option selected disabled>请选择</option>
                <option value="glyphicon glyphicon-user" class="glyphicon">&#57352;  glyphicon glyphicon-user</option>
                <option value="glyphicon glyphicon-th-large" class="glyphicon">&#57360;  glyphicon glyphicon-th-large</option>
                <option value="glyphicon glyphicon-th-list" class="glyphicon">&#57362;  glyphicon glyphicon-th-list</option>
                <option value="glyphicon glyphicon-ok" class="glyphicon">&#57363;  glyphicon glyphicon-ok</option>
                <option value="glyphicon glyphicon-time" class="glyphicon">&#57379;  glyphicon glyphicon-time</option>
                <option value="glyphicon glyphicon-list-alt" class="glyphicon">&#57394;  glyphicon glyphicon-list-alt</option>
                <option value="glyphicon glyphicon-lock" class="glyphicon">&#57395;  glyphicon glyphicon-lock</option>
                <option value="glyphicon glyphicon-list" class="glyphicon">&#57401;  glyphicon glyphicon-list</option>
                <option value="glyphicon glyphicon-tags" class="glyphicon">&#57410;  glyphicon glyphicon-tags</option>
                <option value="glyphicon glyphicon-camera" class="glyphicon">&#57414;  glyphicon glyphicon-camera</option>
                <option value="glyphicon glyphicon-picture" class="glyphicon">&#57440;  glyphicon glyphicon-picture</option>
                <option value="glyphicon glyphicon-check" class="glyphicon">&#57447;  glyphicon glyphicon-check</option>
                <option value="glyphicon glyphicon-random" class="glyphicon">&#57616;  glyphicon glyphicon-random</option>
                <option value="glyphicon glyphicon-comment" class="glyphicon">&#57617;  glyphicon glyphicon-comment</option>
                <option value="glyphicon glyphicon-hdd" class="glyphicon">&#57633;  glyphicon glyphicon-hdd</option>
                <option value="glyphicon glyphicon-dashboard" class="glyphicon">&#57665;  glyphicon glyphicon-dashboard</option>
                <option value="glyphicon glyphicon-equalizer" class="glyphicon">&#57872;  glyphicon glyphicon-equalizer</option>
                <option value="glyphicon glyphicon-king" class="glyphicon">&#57873;  glyphicon glyphicon-king</option>
                <option value="glyphicon glyphicon-cloud" class="glyphicon">&#9729;  glyphicon glyphicon-cloud</option>
                <option value="glyphicon glyphicon-envelope" class="glyphicon">&#9993  glyphicon glyphicon-envelope</option>
                <option value="glyphicon glyphicon-pencil" class="glyphicon">&#9999;  glyphicon glyphicon-pencil</option>
            </select>
        </div>
        <div class="form-group row">
            <label for="edit-form-url">链接</label>
            <input type="text" class="form-control" name="url" id="edit-form-url" required>
        </div>
        <div class="form-group row">
            <button type="button" class="btn btn-success"><i class="glyphicon glyphicon-ok"></i>提交</button>
            <button type="button" class="btn btn-warning"><i class="glyphicon glyphicon-refresh"></i>重置</button>
            <button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-remove"></i>取消</button>
        </div>
    </form>
</div>
</html>
